<template>
  <div>
    <div>
      <div v-if="$route.name ==='search'">搜索结果(&nbsp;<span style="color:red">{{getProductCount}}+</span>&nbsp;)：{{$route.query.q}}</div>
      <div v-else class="pct-classify"><span>为你推荐</span></div>
      <div class="pct-item">
        <ul class="pct-ul">
          <li
            v-for="(item, index) in products"
            :key="item.id"
            class="pct-li"
            :class="(index + 1) % 5 === 0 ? 'li-margin' : ''"
            @mouseenter="enterEvt"
            @mouseleave="leaveEvt"
          >
            <router-link :to="'/product/detail?shopid='+item.id">
              <div class="pct-img">
                <el-image fit="cover" :src="item.productImgurl"></el-image>
              </div>
              <div class="pct-name">
                {{ item.productName }}
              </div>
              <div class="price">
                ￥<span>{{ item.price }}</span>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.pct-classify {
  font-size: 28px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}
.pct-item {
  .pct-ul {
    list-style-type: none;
    overflow: hidden;

    .pct-li {
      float: left;
      width: 200px;
      height: 272px;
      border: 1px solid #f4f4f4;
      margin-right: 10px;
      margin-top: 10px;
      padding: 14px;
      text-align: center;
      background-color: #ffffff;
      cursor: pointer;
      a{
        text-decoration: none;
      }
      .pct-name {
        width: 130px;
        margin-left: 35px;
        font-size: 14px;
        color: #333;
        max-height: 40px;
        min-height: 40px;
        overflow: hidden;
      }
      .price {
        font-size: 18px;
        color: #ff0036;
        margin-top: 10px;
      }
    }
    .pct-li:hover {
      border: 1px solid red;
      transition: all 0.9s;
    }
    .pct-img{
      width: 200px;
      min-height: 200px;
      max-height: 200px;
      overflow: hidden;

    }
    .pct-imghover {
      opacity: 0.7;
      transition: all 0.9s;
    }
    .li-margin {
      margin-right: 0px;
    }
  }
}
</style>

<script>
export default {
  props: {
    products: { type: Array, default: null }
  },
  methods: {
    // 鼠标移入商品
    enterEvt (evt) {
      const element = evt.target.querySelector('.pct-img')
      element.classList.add('pct-imghover')
    },
    leaveEvt (evt) {
      const element = evt.target.querySelector('.pct-img')
      element.classList.remove('pct-imghover')
    }
  },
  computed: {
    getProductCount () {
      return this.products.length
    }
  }
}
</script>

<style>
</style>
